<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="navbar-title">车间生产报表</text>
    </view>

    <!-- 可滚动报表列表 -->
    <scroll-view class="report-list" scroll-y>
      <!-- 报表卡片 -->
      <view
        v-for="(report, index) in reports"
        :key="index"
        class="report-item"
        @click="goDetail(report)"
      >
        <!-- 卡片顶部：日期 & 生产数量 -->
        <view class="report-top">
          <text class="report-date">{{ report.date }}</text>
          <view class="report-production">
            <text class="production-amount">{{ report.productionAmount }}</text>
            <text class="production-label">件</text>
          </view>
        </view>
        <!-- 卡片底部：缺陷数量 -->
        <view class="report-bottom">
          <text class="report-defects">缺陷：{{ report.defects }} 件</text>
        </view>
      </view>
    </scroll-view>

    <!-- 浮动新增按钮（FAB） -->
    <button class="fab" @click="openAddForm">+</button>

    <!-- 新增报表/添加设备的弹窗（包含9个字段） -->
    <view v-if="showAddForm" class="modal">
      <view class="modal-content">
        <text class="modal-title">添加设备 / 新增报表</text>
        
        <!-- 1. 生产计划 -->
        <input
          class="modal-input"
          v-model="newReport.productionPlan"
          placeholder="请输入生产计划"
        />
        <!-- 2. 产品名称 -->
        <input
          class="modal-input"
          v-model="newReport.productName"
          placeholder="请输入产品名称"
        />
        <!-- 3. 车间名称 -->
        <input
          class="modal-input"
          v-model="newReport.workshopName"
          placeholder="请输入车间名称"
        />
        <!-- 4. 生产日期 -->
        <input
          class="modal-input"
          v-model="newReport.productionDate"
          placeholder="请选择生产日期 (YYYY-MM-DD)"
        />
        <!-- 5. 班次 -->
        <input
          class="modal-input"
          v-model="newReport.shift"
          placeholder="请输入班次 (如早班/中班/晚班)"
        />
        <!-- 6. 数量 -->
        <input
          class="modal-input"
          type="number"
          v-model="newReport.quantityProduced"
          placeholder="请输入生产数量"
        />
        <!-- 7. 缺陷数量 -->
        <input
          class="modal-input"
          type="number"
          v-model="newReport.qualityDefects"
          placeholder="请输入缺陷数量"
        />
        <!-- 8. 质量状态 -->
        <input
          class="modal-input"
          v-model="newReport.qualityStatus"
          placeholder="请输入质量状态"
        />
        <!-- 9. 备注 -->
        <input
          class="modal-input"
          v-model="newReport.remarks"
          placeholder="请输入备注"
        />

        <view class="modal-buttons">
          <button class="btn-submit" @click="submitReport">确定</button>
          <button class="btn-cancel" @click="cancelAdd">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reports: [],
      showAddForm: false, // 控制弹窗显示/隐藏
      // 表单数据：根据你的业务需求添加/修改字段
      newReport: {
        productionPlan: '',       // 生产计划
        productName: '',          // 产品名称
        workshopName: '',         // 车间名称
        productionDate: '',       // 生产日期
        shift: '',                // 班次
        quantityProduced: '',     // 数量
        qualityDefects: '',       // 缺陷数量
        qualityStatus: '',        // 质量状态
        remarks: ''               // 备注
      }
    };
  },
  onLoad() {
    this.fetchReports();
  },
  methods: {
    // 1. 获取列表数据
    fetchReports() {
      uni.request({
        url: 'http://localhost:1003/mesEmployeeProductionReport/findList',
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.code === 200) {
            this.reports = res.data.data.map(item => ({
              id: item.id,
              date: item.productionDate,
              productionAmount: item.quantityProduced,
              defects: item.qualityDefects
            }));
          } else {
            uni.showToast({ title: res.data.msg || '获取列表失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('请求错误：', err);
          uni.showToast({ title: '请求错误', icon: 'none' });
        }
      });
    },

    // 2. 打开“新增”弹窗
    openAddForm() {
      this.showAddForm = true;
      // 重置表单
      this.newReport = {
        productionPlan: '',
        productName: '',
        workshopName: '',
        productionDate: '',
        shift: '',
        quantityProduced: '',
        qualityDefects: '',
        qualityStatus: '',
        remarks: ''
      };
    },

    // 3. 提交数据到后端
    submitReport() {
      // 简单校验，必填项可按需判断
      if (!this.newReport.productionPlan || !this.newReport.productName) {
        uni.showToast({ title: '请完善必填信息', icon: 'none' });
        return;
      }

      // 发起 POST 请求
      uni.request({
        url: 'http://localhost:1003/mesEmployeeProductionReport/save',
        method: 'POST',
        header: {
          'Content-Type': 'application/json'
        },
        data: {
          // 你可以将此处字段改成后端需要的字段
          planId: this.newReport.productionPlan,           // 生产计划(示例)
          productName: this.newReport.productName,
          workshopName: this.newReport.workshopName,
          productionDate: this.newReport.productionDate,
          shift: this.newReport.shift,
          quantityProduced: parseFloat(this.newReport.quantityProduced),
          qualityDefects: parseFloat(this.newReport.qualityDefects),
          qualityStatus: this.newReport.qualityStatus,
          remarks: this.newReport.remarks
        },
        success: (res) => {
          if (res.data && res.data.code === 200) {
            uni.showToast({ title: '新增成功', icon: 'success' });
            this.showAddForm = false; // 关闭弹窗
            this.fetchReports();      // 刷新列表
          } else {
            uni.showToast({ title: res.data.msg || '新增失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('请求错误:', err);
          uni.showToast({ title: '请求错误', icon: 'none' });
        }
      });
    },

    // 4. 取消新增
    cancelAdd() {
      this.showAddForm = false;
    },

    // 5. 查看详情（示例）
    goDetail(report) {
      uni.navigateTo({
        url: `/pages/workshopUser/reportDetail/reportDetail?id=${report.id}`
      });
    }
  }
};
</script>

<style scoped>
/* 容器 */
.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  height: 100vh;
}

/* 顶部导航栏 */
.navbar {
  height: 50px;
  background-color: #1296db;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

/* 报表列表 */
.report-list {
  flex: 1;
  padding: 10px 15px;
}
.report-item {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.report-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.report-date {
  color: #666;
  font-size: 14px;
}
.report-production {
  display: flex;
  align-items: baseline;
}
.production-amount {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-right: 4px;
}
.production-label {
  font-size: 12px;
  color: #666;
}
.report-bottom {
  margin-top: 8px;
}
.report-defects {
  font-size: 12px;
  color: #ff5722;
}

/* 浮动按钮（FAB） */
.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  background-color: #1296db;
  color: #fff;
  font-size: 24px;
  border-radius: 24px;
  text-align: center;
  line-height: 48px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  width: 80%;
}
.modal-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}
.modal-input {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
}
.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.btn-submit,
.btn-cancel {
  width: 45%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
}
.btn-submit {
  background-color: #1296db;
  color: #fff;
}
.btn-cancel {
  background-color: #ccc;
  color: #333;
}
/* 遮罩层 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 半透明背景，适度加深，突出弹窗 */
  background-color: rgba(0, 0, 0, 0.6);
  /* 居中布局 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 最高层级，防止被其他元素覆盖 */
  z-index: 999;
}

/* 弹窗主体 */
.modal-content {
  background-color: #fff;
  width: 80%;
  /* 圆角+阴影，让弹窗更有层次感 */
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 内边距增大，保证空间 */
  padding: 24px;
}

/* 标题 */
.modal-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

/* 输入框样式 */
.modal-input {
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  color: #333;
}

/* 底部按钮容器 */
.modal-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

/* 提交、取消按钮 */
.btn-submit,
.btn-cancel {
  width: 40%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
  /* 也可加 box-shadow 或 hover 效果 */
}

.btn-submit {
  background-color: #1296db;
  color: #fff;
}

.btn-cancel {
  background-color: #ccc;
  color: #333;
}

</style>
